<template>
    <div>
        <el-form>
                 <!--联动选择地区-->
    <el-form-item label="选择地区："> 
     <el-select size="small" style="width: 100px"
        v-model="selectProv"
        placeholder="请选择省份"
        v-on:change="getProv($event)"> 
      <el-option
        v-for="item in provs"
        :label="item.label"
        :value="item.value"> 
      </el-option> 
     </el-select> 
     <el-select size="small" style="width: 100px"
        v-if="selectProv!=''"
        v-model="selectCity"
        placeholder="请选择城市"
        v-on:change="getCity($event)"> 
      <el-option
        v-for="item in citys"
        :label="item.label"
        :value="item.value"> 
      </el-option> 
     </el-select> 
    </el-form-item>
        </el-form>
    </div>
</template>
<script>

export default {
 data() {
  return {
   provs:[{label:"北京市",value:"北京市"},{label:"天津市",value:"天津市"},{label:"河北省",value:"河北省"}],
   citys: [],
   selectProv: '',
   selectCity: ''
  }
 },
 methods: {
  /*二级联动选择地区*/
  getProv: function (prov) {
   let tempCity=[];    
   this.citys=[];
   this.selectCity='';    
   let allCity=[{ prov: "北京市",label: "北京市"}, { prov: "天津市",label: "天津市"}, {prov: "河北省",label: "石家庄市"}, { prov: "河北省", label: "唐山市"}, { prov: "河北省", label: "秦皇岛市"}, {prov: "河北省",label: "邯郸市"}, { prov: "河北省",label: "邢台市"}, {prov: "河北省",label: "保定市"}, { prov: "河北省",label: "张家口市"}, { prov: "河北省",label: "承德市"}, { prov: "河北省",label: "沧州市"}, {prov: "河北省",label: "廊坊市"}, {prov: "河北省",label: "衡水市"}];
   for (var val of allCity){
    if (prov == val.prov){
     console.log(val);
     tempCity.push({label: val.label, value: val.label})
    }
   }
   this.citys = tempCity;
  },
  getCity: function (city) {
   console.log(city);
   console.log(this.selectCity)
  }
 },
}

</script>